<template>
	<view>
		<view class="trend">
			<view class="trend-item-titll">日期</view>
			<view class="trend-item-titll">参考金价</view>
			<view class="trend-item-titll">日常跌幅</view>
		</view>
		<view class="trend-last" v-for="item in Trend" :key="item">
			<view class="trend-item">{{item.createTime}}</view>
			<view class="trend-item">{{item.referencePrice}}</view>
			<view class="trend-item redtext" v-if="item.changePercent<=0">{{item.changePercent}}</view>
			<view class="trend-item greentext" v-if="item.changePercent>=0">{{item.changePercent}}</view>
		</view>
	</view>
</template>

<script>
	import {createNamespacedHelpers} from 'vuex'
	const {mapState} = createNamespacedHelpers('gold')
	export default {
		data() {
			return {
				
			}
		},
		computed:{
			...mapState(['Trend'])
		},
		methods: {
			
		}
	}
</script>

<style>
.trend{
	width: 100%;
	height: 78rpx;
	/* border: 1px solid red; */
	display: flex;
}
.trend-last{
	width: 100%;
	height: 78rpx;
	border-bottom: 1rpx solid rgba(0,0,0,0.06);
	display: flex;
}
.trend-item-titll{
	width: 100%;
	height: 100%;
	border-top: 1rpx solid rgba(0,0,0,0.06);
	border-bottom: 1rpx solid rgba(0,0,0,0.06);
	text-align: center;
	line-height: 78rpx;
	font-size: 28rpx;
	color: rgba(0,0,0,0.7);
}
.trend-item{
	width: 100%;
	height: 100%;
	/* border: 1px solid red; */
	text-align: center;
	line-height: 78rpx;
	font-size: 24rpx;
	color: #999999;
}
.redtext{
	color: red;
}
.greentext{
	color: green;
}
</style>
